<template>
	<div>
		<div class="mineNav">
			<MineNav :navTitle="navTitle" />
		</div>
		<router-link :to="{name:'personIndex'}">
			<img class="leftArrow" src="../../../../assets/images/dynamicState/37/f-1.png" alt="" />
		</router-link>
		<p class="submitPass">保存</p>
 		<div class='changName' v-if="isShow">
			<p>{{username}}</p>
			<img src="../../../../assets/images/mine/59/1-2.png" alt="" @click="changeName"/>
		</div>
		<div class="xiuGai" v-else>
			<div>
				<input type="password" placeholder="请输入新的名字"/>
			</div>
		</div>
	</div>
</template>

<script>
	import MineNav from "../../public/mineNav"
	export default {
		data(){
			return{
				navTitle:"昵称",
				rowImg:require("../../../../assets/images/mine/47/rightRow.png"),
                personData:{},
                isShow:true,
                username:"未登录"
			}
		},
		components:{
			MineNav
		},
		created(){
		
			this.username = localStorage.getItem("username") || "未登录"
		    this.isShow = true;
		} ,
		methods:{
			changeName(){
				this.isShow = false;
			}
		}
	}
</script>

<style scoped lang="less">
	@current: 100rem;
	.mineNav {
		height: 88/@current;
	}
	.leftArrow {
		position: fixed;
		top: 26/@current;
		left: 40/@current;
		z-index: 333;
		width: 22/@current;
	}
	.submitPass{
		position: fixed;
		top: 23/@current;
		right: 40/@current;
		z-index: 333;
		font-size:32/@current;
		color:white;
	}
	.changName{
		width:100%;
		height:90/@current;
		background:white;
		border-top:1/@current solid #d7d2e0;
		border-bottom:1/@current solid #d7d2e0;
		margin-top:30/@current;
		p{
			text-align:center;
			height:90/@current;
			line-height:90/@current;
			font-size:36/@current;
			color:#e43c3c;
			float: left;
			margin-left:35/@current;
		}
		img{
			float:right;
			width:36/@current;
			height:36/@current;
			margin-right:30/@current;
			margin-top:27/@current;
			
		}
	}
	.xiuGai{
		width:600/@current;
		margin-left:20/@current;
		div{
			width:100%;
			height:77/@current;
			margin-top:20/@current;
			input{
			   width:583/@current;
			   height:75/@current;	
			   border:1/@current solid #d1cbdc;
			   border-radius: 10/@current;
			   transform: translateY(-52/@current);
			   font-size:32/@current;
			   color:#b0a9ba;
			   padding-left:15/@current;
			}
		}
	}

</style>